<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/material-components-web.min.css" rel="stylesheet">
    <link href="./fonts/material-icons.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-tool material-blue-background">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
                <span class="mdc-top-app-bar__title">Page title</span>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Favorite">favorite</button>
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Search">search</button>
                <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</button>
                <button class="mdc-button mdc-button--outlined">
                    <div class="mdc-button__ripple"></div>
                    <i class="material-icons mdc-button__icon" aria-hidden="true">bookmark</i>
                    <span class="mdc-button__label">Outlined Button plus Icon</span>
                </button>
            </section>
        </div>
    </header>
    
    <main style="height: 2000px;"></main>
    <footer></footer>

    <script src="./js/material-components-web.min.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>